<template>
    <div class="verify-code-container">
        <div class="verify-code-box">
            <div class="top-box van-hairline--bottom">
                <div class="user-price">￥{{money}}</div>
                <div class="user-admin">微信账户 ({{userInfo.umMobile | plusxing(3,4)}}) {{userInfo.umNickName}}</div>
            </div>
            <div class="bottom-box">
                <div class="title">手机号验证</div>
                <div class="alert-info">请输入 ({{userInfo.umMobile | plusxing(3,4)}}) 手机收到的验证码</div>
                <div class="pwd-box">
                    <PasswordInput :value="passWord"
                                   :focused="showKeyboard"
                                   @focus="showKeyboard = true"
                                   :error-info="errorInfo"
                    />
                </div>
            </div>
        </div>
        <NumberKeyboard
                :show="showKeyboard"
                @input="onInput"
                @delete="onDelete"
                @blur="showKeyboard = false"
        />
    </div>
</template>

<script>
    import { PasswordInput, NumberKeyboard,Notify } from 'vant';
    import {getMoney} from "../api/user";
    import {mapGetters} from "vuex";
    import localStorage from "@utils/store/localStorage";

    export default {
        name: "VerifyCode",
        components:{
            PasswordInput,
            NumberKeyboard
        },
        data() {
            return {
                passWord:'',
                showKeyboard: true,
                errorInfo: '',
                money:0,
                pid:localStorage.get('creationId'),
            }
        },
        computed:{
            ...mapGetters(['userInfo'])
        },
        filters:{
            plusxing: function (str, frontLen, endLen) {
                let len = str.length - frontLen - endLen;
                let xing = '';
                for (let i = 0; i < len; i++) {
                    xing += '*';
                }
                return str.substring(0, frontLen) + xing + str.substring(str.length - endLen)
            }
        },
        created() {
            this.init()
        },
        watch:{
            '$route': 'init'
        },
        methods:{
            init(){
              return  this.money = this.$route.params.getMoney
            },
            onInput(key) {
                this.passWord = (this.passWord + key).slice(0, 6);
                if (this.passWord.length === 6){
                    getMoney(this.userInfo.umId,this.passWord,this.money,this.pid).then(res => {
                        if (res.code === 1){
                            return this.$router.push({name:'GetMoneyInfo',params:res.data})
                        }else {
                            return  Notify({ type: 'danger', message: res.msg });
                        }
                    })

                }
            },
            onDelete() {
                this.passWord = this.passWord.slice(0, this.passWord.length - 1);
            },
        }
    }
</script>

<style scoped lang="scss">
    .verify-code-container{
        overflow: hidden;
        .verify-code-box{
            width:345px;
            background:rgba(255,255,255,1);
            border-radius:8px;
            margin: 15px;
            .top-box{
                height: 122px;
                overflow: hidden;
                .user-price{
                    font-size:28px;
                    font-weight:500;
                    color:rgba(255,141,81,1);
                    text-align: center;
                    margin-top: 30px;
                }
                .user-admin{
                    font-size:14px;
                    font-weight:400;
                    color:rgba(66,69,95,1);
                    text-align: center;
                    margin-top: 10px;
                }
            }
            .bottom-box{
                height: 192px;
                .title{
                    font-size:16px;
                    font-weight:500;
                    color:rgba(66,69,95,1);
                    margin-top: 30px;
                    text-align: center;
                }
                .alert-info{
                    font-size:12px;
                    font-weight:400;
                    color:rgba(66,69,95,1);
                    margin-top: 15px;
                    text-align: center;
                }
                .pwd-box{
                    margin-top: 20px;
                }
            }
        }
    }
</style>
